<template>
  <div class="page">
    <div class="login-header">
      <div class="title">{{ $t('appTitle') }}</div>
      <lang-select class="language-select"></lang-select>
    </div>

    <div class="login-form">
      <div class="title">{{ $t('labels.login') }}</div>
      <el-form
        :model="loginInfo"
        ref="loginRef"
        label-position="left"
        :rules="rules"
        @keyup.enter.native="handleLogin">
        <el-form-item
          class="form-item"
          prop="account"
          label=""
          label-width="0">
          <el-input
            v-model="loginInfo.account"
            size="small"
            :placeholder="$t('placeholders.account')">
          </el-input>
        </el-form-item>

        <el-form-item
          class="form-item"
          prop="password"
          label=""
          label-width="0">
          <el-input
            ref="pwdRef"
            type="password"
            v-model="loginInfo.password"
            size="small"
            auto-complete="new-password"
            :placeholder="$t('placeholders.password')">
          </el-input>
        </el-form-item>
      </el-form>
      <el-button
        :loading="loading"
        class="login-btn"
        size="small"
        type="primary"
        @click="handleLogin">
        {{ $t('buttons.login') }}
      </el-button>
    </div>
  </div>
</template>

<script>
import store from '@/store/index'
import LangSelect from '@/components/LangSelect'
import { encrypt } from '@/utils'
import { login } from '@/api/user'
import { setToken } from '@/utils/auth'

export default {
  components: {
    LangSelect,
  },
  data() {
    return {
      loading: false,
      loginInfo: {
        account: '',
        password: '',
      },
      rules: {
        account: [{ validator: this.validateAcc }],
        password: [{ validator: this.validatePwd }],
      },
    }
  },
  methods: {
    validateAcc(rule, value, callback) {
      if (!value) {
        callback(new Error(this.$t('placeholders.account')))
      } else {
        callback()
      }
    },
    validatePwd(rule, value, callback) {
      if (!value) {
        callback(new Error(this.$t('placeholders.password')))
      } else {
        callback()
      }
    },
    // 点击登录
    handleLogin() {
      this.$refs.loginRef.validate(async isValid => {
        if (isValid) {
          this.loading = true
          const loginForm = { ...this.loginInfo }
          const { code, data: resData } = await login(loginForm)

          if (code === 0) {
            const userInfo = resData ?? {}
            store.commit('app/SET_USER_INFO', userInfo)
            setToken(userInfo.Token)
            this.$router.push({
              path: '/databoard/dataPanel',
            })
          }
          this.loading = false
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.page {
  @include flexbox($jc: center, $ai: center);
  @include bgImg();
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url('~@/assets/img/login_bg.png');
  .login-header {
    @include flexbox($jc: space-between, $ai: center);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    color: #fff;
    padding: 0 30px;
    height: $navbarHeight;
    background-color: #001529;
    .title {
      font-size: 18px;
      font-weight: bold;
    }
    .language-select {
      color: #fff;
      cursor: pointer;
    }
  }
  .login-form {
    padding: 35px 30px 50px 30px;
    background-color: #fff;
    width: 380px;
    border-radius: 4px;
    // margin-bottom: 120px;
    box-shadow: 0 0 20px 0 rgba(203, 208, 226, 0.5);
    .form-item {
      margin-bottom: 30px;
    }
    .title {
      width: 100%;
      font-size: 18px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 30px;
    }
    .login-btn {
      cursor: pointer;
      width: 100%;
      margin-top: 5px;
    }
  }
}
</style>
